<link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../lib/overlayscrollbars/styles/overlayscrollbars.min.css">
<link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-12 pt-2">

    <div class="row text-center">
        <div class="col-9"></div>
        <div class="col-3">
            <a data-toggle="modal" data-target="#modalAdd" class="btn btn-warning">新增</a>
        </div>
    </div>
    <table class="table table-bordered">
        <thead>
        <th>序号</th>
        <th>供应商名称</th>
        <th>供应商注册地址</th>
        <th>联系人</th>
        <th>手机号</th>
        <th>操作</th>
        </thead>
        <tbody>

        <tr th:each="supplier:${data}">
            <td th:text="${supplier.getId()}" class="col-sm-auto col-form-label"></td>
            <td th:text="${supplier.getName()}" class="col-sm-auto col-form-label"></td>
            <td th:text="${supplier.getAddress()}" class="col-sm-auto col-form-label"></td>
            <td th:text="${supplier.getContact_person()}" class="col-sm-auto col-form-label"></td>
            <td th:text="${supplier.getTelephone()}" class="col-sm-auto col-form-label"></td>
            <td>
                <button class="btn btn-info" th:onclick="del([[${supplier.getId()}]])">删除</button>
                <button data-toggle="modal" data-target="#modalUpdate" class="btn btn-dark"
                        th:onclick="update([[${supplier.getId()}]],[[${supplier.getName}]],[[${supplier.getAddress}]],
                                  [[${supplier.getContact_person}]],[[${supplier.getTelephone}]])">
                    更新
                </button>
<!--                <button data-toggle="modal" data-target="#modalAdd" class="btn btn-danger">-->
<!--                    新增-->
<!--                </button>-->
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!--   模态框测（Modal）-->
<!-- 定义一个新增的子窗体模态框（Modal）HTML代码 -->
<div class="modal fade" id="modalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    新增供应商
                </h4>
            </div>
            <div class="modal-body">
                <!--                    新增表单区-->
                <form method="post" action="/supplier/suppplierAddProcess">
                    <div class="form-control">
                        <label for="">供应商名称</label>
                        <input type="text" name="name" id="">
                    </div>
                    <div class="form-control">
                        <label for="">供应商注册地址</label>
                        <input type="text" name="address" id="">
                    </div>
                    <div class="form-control">
                        <label for="">联系人</label>
                        <input type="text" name="contact_person" id="">
                    </div>
                    <div class="form-control">
                        <label for="">手机号</label>
                        <input type="text" name="telephone" id="">
                    </div>
                    <div class="form-control">
                        <input type="submit" value="提交" class="btn btn-primary">
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--    定义更新子窗体模态框代码区-->
<div class="modal fade" id="modalUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">更新供应商</h4>
            </div>
            <div class="modal-body">
                <div class="form-control">
                    <label for="">序号</label>
                    <input type="text" name="id" id="Id" disabled="disabled">
                </div>
                <div class="form-control">
                    <label for="">供应商名称</label>
                    <input type="text" name="name" id="name">
                </div>
                <div class="form-control">
                    <label for="">供应商注册地址</label>
                    <input type="text" name="address" id="address">
                </div>
                <div class="form-control">
                    <label for="">联系人</label>
                    <input type="text" name="contact_person" id="contact_person">
                </div>
                <div class="form-control">
                    <label for="">手机号</label>
                    <input type="text" name="telephone" id="telephone">
                </div>
                <div class="form-control">
                    <button class="btn btn-danger" id="btnUpdate">更新</button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script>
    <!--    删除函数方法-->
    function del(id){
//     确认是否删除
        var flag = confirm("是否删除该条记录");
        if (flag==true){
            //     使用ajax传递参数的方法交给后端去做处理
            $.post("/api/supplierDelete",{'id':id},function (res){
                console.log(res)
                if (res==1){
                    alert("删除成功");
                    location.reload();
                }else{
                    alert("删除失败");
                }
            })
        }
    }

    // 更新
    function update(id,name,address,contact_person,telephone){
//     肯定有了这个商品信息，包括商品的所有字段
        console.log(id,name,address,contact_person,telephone)
//     单独去给更新代码块的表单value赋值
        $('#Id').val(id);
        $('#name').val(name);
        $('#address').val(address);
        $('#contact_person').val(contact_person);
        $('#telephone').val(telephone);
//     去使用ajax方式提交处理
    }
    // 提交更新处理
    $('#btnUpdate').click(function () {
        var flag = confirm("确认提交更新？")
        if (flag == true) {
            $.post("/api/supplierUpdateProcess", {
                "id": $('#Id').val(), "name": $('#name').val(), "address": $('#address').val(),
                "contact_person": $('#contact_person').val(), "telephone": $('#telephone').val()
            }, function (res) {
                if (res == 1) {
                    alert("更新OK");
                    location.href = "/supplier/supplierList"
                } else {
                    alert("更新失败");
                }
            })
        }
    })
</script>